<script setup>

import Header from "@/components/Header.vue";
import BackTop from "@/components/BackTop.vue";
import {
  Basketball,
  Flag,
  Iphone,
  Male, Memo,
  Message,
  OfficeBuilding,
  Place,
  User
} from "@element-plus/icons-vue";
import Footer from "@/components/Footer.vue";
</script>

<template>
  <header>
    <Header @custom-event="searchVideo"></Header>
  </header>
  <BackTop></BackTop>
  <main>
    <div class="page-container">
      <el-dialog
          title="修改个人资料"
          v-model="dialogVisible"
          width="50%"
          @close="dialogVisible = false"
          draggable
      >
        <!-- 表单 -->
        <el-form :model="form" ref="form" label-width="120px">
          <el-form-item label="用户名">
            <el-input class="dialog-input" v-model="form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input type="password" v-model="form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('form')">提交</el-button>
            <el-button @click="dialogVisible = false">取消</el-button>
          </el-form-item>
        </el-form>
      </el-dialog>
      <p><strong>个人资料</strong></p>
      <el-card class="info-card">
        <div class="avatar-content" title="单击上传头像">
          <el-upload
              class="avatar-uploader"
              action="#"
              :show-file-list="false"
              :before-upload="beforeAvatarUpload"
              :on-success="handleAvatarSuccess"
              :http-request="customUpload"
          >
            <el-avatar :size="128" shape="square">USER</el-avatar>
          </el-upload>
        </div>
        <div class="user-desc">
          <p>昵称：<b>{{ nickname }}</b></p>
          <p>ID：{{ web_id }}</p>
        </div>
      </el-card>
      <el-card class="user-settings">
        <b>偏好设置</b>
        <el-divider/>
        <el-form-item label="播放设置：">
          <el-switch v-model="autoplay" active-value="true" inactive-value="false" active-text="自动播放"
                     inactive-text="手动播放"/>
        </el-form-item>
        <el-form-item label="默认静音：">
          <el-switch v-model="autoMute" active-value="true" inactive-value="false" active-text="是" inactive-text="否"/>
        </el-form-item>


      </el-card>
      <el-card class="algorithms-card">
        <b>异元链</b>
        <div class="button">
          <el-button type="warning" @click="generateAlgorithms" plain>分享异元链</el-button>
          <el-button type="success" @click="addAlgorithms" plain>导入异元链</el-button>
        </div>
        <el-divider/>
        <el-form-item label="身份标识符：" size="large">
          <el-select
              v-model="algorithms"
              placeholder="Select"
              size="large"
              style="width: 300px"
          >
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

      </el-card>
      <el-card class="more-info-card">
        <el-descriptions class="margin-top" title="个人信息" :column="1" border>
          <template #extra>
            <el-button type="primary" @click="dialogVisible = true">修改资料</el-button>
          </template>
          <el-descriptions-item>
            <template #label>
              <el-icon>
                <User/>
              </el-icon>
              年龄
            </template>
            {{ age }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <el-icon>
                <Male/>
              </el-icon>
              性别
            </template>
            <el-tag size="small">{{ sex }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <el-icon>
                <Message/>
              </el-icon>
              邮箱Email
            </template>
            {{ email }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <el-icon>
                <iphone></iphone>
              </el-icon>
              手机号码
            </template>
            {{ mobilePhoneNumber }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <el-icon>
                <Place/>
              </el-icon>
              地区
            </template>
            {{ area }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <el-icon>
                <OfficeBuilding/>
              </el-icon>
              职业
            </template>
            {{ work }}
          </el-descriptions-item>

          <el-descriptions-item>
            <template #label>
              <el-icon>
                <basketball/>
              </el-icon>
              兴趣爱好
            </template>
            {{ hobby }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <el-icon>
                <Memo/>
              </el-icon>
              个性签名
            </template>
            {{ design }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template #label>
              <el-icon>
                <Flag/>
              </el-icon>
              注册时间
            </template>
            {{ register_time }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </div>
  </main>
  <footer>
    <Footer/>
  </footer>
</template>

<style scoped>
header {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--el-bg-color);
  user-select: none;
}

.page-container {
  width: 60%;
  position: relative;
  top: 2rem;
  height: 180vh;
  margin: auto;
//border: #2c2c2c solid 2px;
}

.info-card {
  margin-top: 2%;
  width: 100%;
  height: 200px;
  background-color: var(--el-bg-color-page);
  border-radius: 4px;
}

.more-info-card {
  margin-top: 2rem;
}

.avatar-content {
  width: 30%;
  height: 100%;
  position: relative;
  padding-top: 2%;
  padding-left: 4%;
  display: inline-block;
}

.user-desc {
  display: inline-block;
}

p strong {
  font-size: 24px;
}

footer {
  margin-top: 140px;
}

.dialog-input {
  width: 60%;
}

.algorithms-card {
  margin-top: 2%;
}

.user-settings {
  margin-top: 2%;
}
.button{
  margin-top: -20px;
  position: absolute;
  right: 1rem;
}
</style>
<script>
import store from "@/store";
import axios from "axios";
import Api from "@/api/user";

export default {
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      Api.getAllInfo().then(res => {
        this.nickname = res.data.data.nickName
        this.web_id = res.data.data.webId
        this.area = res.data.data.address
        this.mobilePhoneNumber = res.data.data.phone
        this.email = res.data.data.email
        this.age = res.data.data.age
        this.hobby = res.data.data.hobby
        this.work = res.data.data.work
        this.sex = res.data.data.sex
        this.design = res.data.data.personalSignature
        this.register_time = res.data.data.registerTime.toString().substring(0, 10)
      });
    },
    searchVideo() {
      // this.$refs.video_container.searchData();
      this.$router.push({
        path: "/Hot",
        query: {
          keys: store.state.search.key
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功');
          // 这里可以添加提交表单到服务器的逻辑
          this.dialogVisible = false; // 提交成功后关闭弹窗
        } else {
          console.log('验证失败');
          return false;
        }
      });
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isLT2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLT2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!');
      }
      return isJPG && isLT2M;
    },
    handleAvatarSuccess(response, file, fileList) {
      // 如果服务器返回了图片的URL，更新 imageUrl
      this.imageUrl = response.url;
    },
    customUpload(options) {
      // 自定义上传逻辑，这里可以根据需要发送请求到服务器
      const formData = new FormData();
      formData.append('avatar', options.file);

      // 使用 axios 或其他库发送请求
      axios.post('/your-upload-url', formData).then(response => {
        // 处理服务器响应，更新 imageUrl 或其他逻辑
        this.imageUrl = response.data.url;
        this.$message.success('头像上传成功');
      }).catch(error => {
        this.$message.error('头像上传失败');
      });
    },
  },
  data() {
    return {
      avatar: "",
      web_id: "",
      age: "",
      email: "",
      mobilePhoneNumber: "",
      area: "",
      nickname: "",
      sex: "未知",
      work: "",
      hobby: "",
      design: "",
      register_time: "",
      dialogVisible: false, // 控制弹窗显示与隐藏
      form: {
        username: '',
        password: ''
      },
      algorithms: '默认',
      options: [
        {
          value: 'Option1',
          label: 'Option1',
        },
        {
          value: 'Option2',
          label: 'Option2',
        },
        {
          value: 'Option3',
          label: 'Option3',
        },
        {
          value: '自己',
          label: '默认',
        },
        {
          value: 'Option5',
          label: 'Option5',
        },],
      autoplay: "false",
      autoMute: "",
    };
  },
}
</script>